<template>
  <div id="box">
    <h2>
      饿了么</h2>
    <main>
      <van-tabs v-model="active" title-active-color="red">
        <van-tab title="全部" 
          >全部
          <div class="goods" v-for="(item, index) in list" :key="index">
            <div class="tit">
              <img src="" alt="" />
              <div class="title">纯手工饺子</div>
              <span class="sp">已送达</span>
            </div>
            <div class="container">
              <div class="phote">
                <img src="" alt="" />
                <img src="" alt="" />
              </div>
              <div>
                <p>￥17.8</p>
                <p>共2件</p>
              </div>
            </div>

            <button type="button" class="btn">再来一单</button>
          </div>
        </van-tab>
        <van-tab title="待消费">待消费</van-tab>
        <van-tab title="待评价">待评价</van-tab>
        <van-tab title="退款">退款</van-tab>
      </van-tabs>
    </main>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer.vue";
import { shopcart_list } from "../../api/index2";

export default {
  name: "Order",
  components: { Footer, },
  data() {
    return {
      userid: 1,
      active: 2,
      list: [],
    };
  },
  methods: {},
  //登录和注册写完后就可进行
  mounted() {
    shopcart_list({ userid: localStorage.getItem("userid") }).then((res) => {
      // console.log("1");
      this.list = res.data.list
      console.log("res.data.list",res.data.list);
    });
  },
};
</script>

<style lang="css" scoped>
#box {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  background-color: rgb(249, 249, 249);
}
main {
  flex: 1;
  overflow: auto;
}
h2 {
  text-align: center;
  margin-top: 10px;
}
main .goods {
  background-color: #fff;
  margin: 10px;
  height: 170px;
  border-radius: 15px;
  box-sizing: border-box;
  padding: 10px;
}
main .goods .tit {
  width: 100%;
  height: 35px;
  background-color: rgb(227, 222, 222);
  display: flex;
  justify-content: space-around;
  line-height: 35px;
}
main .goods .tit img {
  display: block;
  width: 35px;
  height: 35px;
  border-radius: 7px;
  background-color: red;
  margin-right: 10px;
}
main .goods .tit .title {
  flex: 1;
}
main .goods .tit .sp {
  color: gray;
}
main .goods .container {
  margin: 5px 0;
  height: 70px;
  background-color: gray;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

main .goods .container .phote img {
  vertical-align: middle;
  width: 67px;
  height: 67px;
  border-radius: 10px;
  margin-right: 6px;
}
main .goods .container div:nth-child(2) {
  text-align: right;
}
main .goods .btn {
  width: 90px;
  height: 30px;
  border-radius: 20px;
  border: 2px solid rgb(23, 161, 216);
  color: rgb(23, 161, 216);
  background-color: #fff;
  float: right;
}
main .van-tabs{
  margin-top: 35px;
  padding: 0 15px;
}

</style>